<template>
    <div class="com-container">
        <!-- <div></div> -->
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'DashboardChart',
})
// 仪表盘
export default class DashboardChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
        // this.updateChart();
        window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            backgroundColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.48,
                colorStops: [
                    {
                        offset: 0,
                        color: '#b8e9ff', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        // color: 'red', // 0% 处的颜色
                        color: '#e7f2ff', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'white', // 100% 处的颜色
                    },
                ],
                globalCoord: true, // 缺省为 false
            },
            series: [
                // 蓝色
                {
                    type: 'gauge',
                    center: ['50%', '50%'], // 默认全局居中
                    radius: '80%',
                    startAngle: 200,
                    endAngle: -20,
                    // progress: {
                    //     show: true,
                    //     roundCap: true, // 两端显示圆形,当前版本不支持该属性
                    // },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                // 表盘颜色
                                [0.1, '#0f7ffd'],
                                [
                                    0.5,
                                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#0f7ffd',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1bc9fe',
                                        },
                                    ]),
                                ],
                                // [0.7, '#fd5655'],
                                [
                                    1,
                                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#0f7ffd',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1bc9fe',
                                        },
                                    ]),
                                ],
                            ],
                            width: 10, // 表盘宽度
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                },
                {
                    type: 'gauge',
                    center: ['50%', '50%'], // 默认全局居中
                    radius: '60%',
                    startAngle: 200,
                    endAngle: -20,
                    axisLine: {
                        show: true,

                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                [1, '#dff1ff'], // 90%-100%处的颜色
                            ],
                            width: 30, // 表盘宽度
                        },
                    },
                    splitLine: {
                        distance: -10,
                        // 分割线样式（及10、20等长线样式）
                        length: 7,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            width: 1,
                            color: '#47c5fd',
                        },
                    },
                    axisTick: {
                        splitNumber: 8,
                        distance: -10,
                        // 刻度线样式（及短线样式）
                        length: 7,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            width: 1,
                            color: '#47c5fd',
                        },
                    },
                    axisLabel: {
                        // 文字样式（及“10”、“20”等文字样式）
                        // color: '#b8efff',
                        // distance: 0 //文字离表盘的距离
                        show: false,
                    },
                    detail: { show: false },
                },
                {
                    type: 'gauge',
                    center: ['50%', '50%'], // 默认全局居中
                    radius: '50%',
                    startAngle: 200,
                    endAngle: -20,

                    axisLine: {
                        show: true,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: [
                                // 表盘颜色
                                // [0.5, '#DA462C'], //0-50%处的颜色
                                // [0.7, '#FF9618'], //51%-70%处的颜色
                                // [0.9, '#FFED44'], //70%-90%处的颜色
                                [1, '#47c5fd'], // 90%-100%处的颜色
                            ],
                            width: 2, // 表盘宽度
                        },
                    },
                    splitLine: {
                        distance: 15,
                        // 分割线样式（及10、20等长线样式）
                        length: 10,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            width: 1,
                            color: '#47c5fd',
                        },
                    },
                    axisTick: {
                        splitNumber: 4,
                        distance: 15,
                        // 刻度线样式（及短线样式）
                        length: 5,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            width: 1,
                            color: '#47c5fd',
                        },
                    },
                    axisLabel: {
                        // 文字样式（及“10”、“20”等文字样式）
                        color: 'gray',
                        fontSize: 7,
                        distance: 3, // 文字离表盘的距离
                        // show: false
                    },

                    pointer: {
                        width: 3, // 指针的宽度
                        length: '60%', // 指针长度，按照半圆半径的百分比
                        shadowColor: '#ffc3c7', // 默认透明
                        shadowBlur: 30,
                    },

                    itemStyle: {
                        // 渐变颜色
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                            {
                                offset: 1,
                                color: '#1bc9fe',
                            },
                            {
                                offset: 0,
                                color: '#0f7ffd',
                            },
                        ]),
                        shadowColor: '#ffc3c7', // 默认透明
                        shadowBlur: 30,
                    },
                    title: {
                        offsetCenter: [0, '60%'],
                        fontSize: 16,
                    },
                    detail: {
                        formatter: '120(20%)',
                        offsetCenter: [0, '100%'],
                        // backgroundColor: '#FFEC45', // 文字部分背景颜色
                        height: 5,
                        color: '#91898b',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    },
                    data: [
                        {
                            value: 70,
                            name: '警告',
                            label: {
                                textStyle: {
                                    fontSize: 12,
                                },
                            },
                        },
                    ],
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // 点击事件
        const that = this;
        this.chartInstance.on('click', function(params) {
            // console.log(params);
            if (params.name == '平均值') {
                return;
            } else {
                that.$emit('signKey', params.name, params.data.ids);
            }
        });
    }
    updateChart(e) {
        // 平均值
        const dataOption = {
            series: [{ data: e.data }],
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                    // 条目文字配置
                    // itemStyle: {
                    //   barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
                    // }
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
